<template>
    <div class="component">
      <Breadcrumb :menulist="menulist" :showSystem="false"> </Breadcrumb>
      <el-table
          :data="tableData"
          max-height="600"
          line-height="50"
          border
          :header-cell-style='headerStyle'
          style="width: calc(100% - 40px); margin: 0 20px;">
          <el-table-column
              prop="userId"
              label="用户ID"
              align="center">
          </el-table-column>
          <el-table-column
              prop="userName"
              align="center"
              label="用户名称">
          </el-table-column>
          <el-table-column
              prop="password"
              align="center"
              label="登录密码">
          </el-table-column>
          <el-table-column
              prop="role"
              align="center"
              label="用户角色">
          </el-table-column>
          <el-table-column
              prop="descript"
              align="center"
              label="描述">
          </el-table-column>
      </el-table>
    </div>
</template>


<script>
// @ is an alias to /src
import Breadcrumb from "@/components/Breadcrumb.vue";

export default {
  name: "user",
  components: {
    Breadcrumb
  },
  data() {
    return {
      menulist: ['首页', '用户'],
      headerStyle: {
        "line-height": "40px"
      },
      tableData: [
        {
            userId: '1',
            userName: '赵怀远',
            password: '1234565',
            role: '开发',
            descript: '测试数据'
        },
        {
            userId: '2',
            userName: '赵怀远',
            password: '1234565',
            role: '实施',
            descript: '测试数据2'
        },
      ],
    };
  },

  created() {

  },
  methods: {

  }
};
</script>

<style scoped>

</style>
